<template>
  <div class="container">
    <div class="row">
      <div class="col-12 pt-3">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th scope="col">编号</th>
              <th scope="col">科目</th>
              <th scope="col">成绩</th>
              <th scope="col">考试时间</th>
              <th scope="col">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in list" :key="item.id">
              <th scope="row">{{item.id}}</th>
              <td>{{item.subject}}</td>
              <td :class="{'not-pass':item.score<60}">{{item.score}}</td>
              <td>{{formatTime(item.time)}}</td>
              <td>
                <button type="button" class="btn btn-link" @click="deleteSubject(index)">删除</button>
              </td>
            </tr>
           
            <tr class="bg-light">
              <th scope="row">统计</th>
              <td colspan="2">总分：{{total}}</td>
              <td colspan="2">平均分：{{average}}</td>
            </tr>
          </tbody>
          <tfoot style="display: none">
            <tr>
              <td class="text-center" colspan="5">暂无数据</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>

    <form class="row align-items-center" @submit.prevent="addSubject">
      <div class="col-3">
        <input type="text" class="form-control" placeholder="请输入科目" v-model.trim="subject" />
      </div>

      <div class="col-3">
        <input type="text" class="form-control" placeholder="请输入分数" v-model.number="score" />
      </div>

      <div class="col-3">
        <button type="submit" class="btn btn-primary">添加</button>
      </div>
    </form>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  name: "App",
  data() {
    return {
      list: [
      
      ],
      subject:'',
      score:0
    };
  },
  watch:{
score(newval,oldval){
console.log(newval,oldval)
if(newval<0){
  alert('成绩不能为负数')
  return
}
if(newval>100){
  alert('成绩不能超过100')
  return
}
},
list(newval,oldval){
  console.log(newval,oldval);
  localStorage.setItem("list",JSON.stringify(newval))
}
  },
  created(){
    const result=localStorage.getItem("list")
     console.log("组件创建，读取缓存", result);
     if(result){
      this.list=JSON.parse(result)
     }
  },
  computed:{
    total(){
let sum=0
this.list.forEach(item=>{
  sum+=item.score
})
return sum
    },
    average(){
      if(this.list.length===0){
        return 0
      }
      return this.total/this.list.length
    }
  },
  methods:{
    addSubject(){
      const last=this.list[this.list.length-1]
      this.list.push({
        id:last?last.id+1:100,
        subject:this.subject,
        score:this.score,
        time:new Date()


      })
      this.subject='',
      this.score=0
    },
    deleteSubject(index){
      this.list.splice(index,1)
    },
    formatTime(time){
     return  moment(time).format('YYYY-MM-DD  HH:mm:ss ');
    }
  }
};
</script>

<style scoped>
.not-pass{
  color: red;
}
</style>
